<template>
  <div class="app-body">
    <Comheadernav></Comheadernav>
    <Comheader></Comheader>
    <div class="xtx-goods-page">
      <div class="container">
        <div class="xtx-bread">
          <div class="xtx-bread-item">
            <a href="#/" class="router-link-active">首页</a>
          </div>
          <i class="iconfont icon-xiangyoujiantou"></i>
          <div class="xtx-bread-item">
            <a href="">{{ productList.categories[1].name }}</a>
          </div>
          <i class="iconfont icon-xiangyoujiantou"></i>
          <div class="xtx-bread-item">
            <a href="">{{ productList.categories[0].name }}</a>
          </div>
          <i class="iconfont icon-xiangyoujiantou"></i>
          <div class="xtx-bread-item">
            <span>{{ productList.name }}</span>
          </div>
        </div>
        <div class="goods-info">
          <div class="media">
            <div class="goods-image">
              <div class="large"></div>
              <div class="middle">
                <img :src="productList.mainPictures[imgIndex]" alt="" />
                <div class="layer"></div>
              </div>
              <ul class="small">
                <li
                  v-for="(item, index) in productList.mainPictures"
                  @mouseover="imgOver(index)"
                >
                  <img :src="item" alt="" />
                </li>
              </ul>
            </div>
            <ul class="goods-sales">
              <li>
                <p>销量人气</p>
                <p>200+</p>
                <p><i class="iconfont icon-task-filling"></i>销量人气</p>
              </li>
              <li>
                <p>销量人气</p>
                <p>200+</p>
                <p><i class="iconfont icon-task-filling"></i>销量人气</p>
              </li>
              <li>
                <p>销量人气</p>
                <p>200+</p>
                <p><i class="iconfont icon-task-filling"></i>销量人气</p>
              </li>
              <li>
                <p>销量人气</p>
                <p>200+</p>
                <p><i class="iconfont icon-task-filling"></i>销量人气</p>
              </li>
            </ul>
          </div>
          <div class="spec">
            <p class="g-name">{{ productList.name }}</p>
            <p class="g-desc">{{ productList.desc }}</p>
            <p class="g-price">
              <span>{{ productList.price }}</span>
              <span>{{ productList.oldPrice }}</span>
            </p>
            <div class="g-service">
              <dl>
                <dt>促销</dt>
                <dd>12月好物放送，App领券购买直降120元</dd>
              </dl>
              <dl>
                <dt>配送</dt>
                <dd>
                  <b
                    style="
                      vertical-align: middle;
                      padding-right: 5px;
                      font-weight: normal;
                    "
                    >至</b
                  >
                  <div class="xtx-city">
                    <div class="select">
                      <span class="value">北京市 市辖区 东城区</span>
                      <i class="iconfont icon-angle-down"></i>
                    </div>
                  </div>
                </dd>
              </dl>
              <dl>
                <dt>服务</dt>
                <dd>
                  <span>无忧退货</span>
                  <span>快速退款</span>
                  <span>免费包邮</span>
                  <a href="javascript:;">了解详情</a>
                </dd>
              </dl>
            </div>
            <div class="goods-sku">
              <dl v-for="(item, idx) in productList.specs">
                <dt>{{ item.name }}</dt>
                <dd v-for="(i, index) in item.values">
                  <img
                    v-if="i.picture"
                    :src="i.picture"
                    alt=""
                    :class="{ active: tab[idx] == index }"
                    @click="tabIndex(idx, index)"
                  />
                  <span
                    v-else
                    :class="{ active: tab[idx] == index }"
                    @click="tabIndex(idx, index)"
                  >
                    {{ i.name }}</span
                  >
                </dd>
              </dl>
            </div>
            <div class="xtx-numbox">
              <div class="label">数量</div>
              <div class="numbox">
                <a href="javascript:;" @click="rem">-</a>
                <input type="text" value="1" v-model="count" />
                <a href="javascript:;" @click="add">+</a>
              </div>
            </div>
            <button
              class="primary xtx-button ellipsis middle"
              style="margin-top: 20px"
              @click="addCar"
            >
              加入购物车
            </button>
          </div>
        </div>
        <Comrecommend></Comrecommend>
      </div>
    </div>
    <Comfooter></Comfooter>
  </div>
</template>
<script>
import Comheader from "@/erabbit/layout/header.vue";
import Comheadernav from "@/erabbit/layout/nav.vue";
import Comfooter from "@/erabbit/foooterNav.vue";
import Comrecommend from "@/erabbit/recommend.vue";

export default {
  components: {
    Comheader,
    Comheadernav,
    Comfooter,
    Comrecommend
  },
  data() {
    return {
      productList: [],
      revantList: [],
      imgIndex: 0,
      tab: {},
      skuId: "",
      count: 1,
    };
  },
  mounted() {
        
    this.getProduct();

    console.log(this.$route.params.id);
  },
  watch: {
    $route() {
      this.getProduct();
      this.addCar()
    },
  },
  methods: {
    
    getProduct() {
      this.axios({
        url:
          "http://pcapi-xiaotuxian-front-devtest.itheima.net/goods?id=" +
          this.$route.params.id,
        method: "get",
      }).then((res) => {
        if (res.data.msg == "操作成功") {
          this.productList = res.data.result;
        }
        //  console.log(this.productList);
      });
    },

    imgOver(index) {
      this.imgIndex = index;
    },
    tabIndex(idx, index) {
      if (this.tab[idx] == index) {
        this.$delete(this.tab, idx);
      } else {
        this.$set(this.tab, idx, index);
      }
      var keys = Object.keys(this.tab);
      var valName = [];
      for (var i = 0; i < keys.length; i++) {
        valName.push(
          this.productList.specs[keys[i]].values[this.tab[keys[i]]].name
        );
      }
      console.log(valName);
      this.productList.skus.forEach((i) => {
        var str = "";
        i.specs.forEach((item) => {
          str += item.valueName;
        });
        if (str == valName.join("")) {
          console.log(i.id);
          this.skuId = i.id;
        }
      });
    },
    addCar() {
      console.log(this.$store.state.user.token);
      this.axios({
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart",
        method: "post",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.token,
        },
        data: {
          count: this.count,
          skuId: this.skuId,
        },
      }).then({
      })
    },
    add() {
      this.count++;
    },
    rem() {
      this.count--;
      if (this.count == 1) {
        this.count = 1;
      }
    },
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
  list-style: none;
}
ul {
  list-style: none;
}
dd,
dl,
h1,
h3,
h4,
p,
ul {
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
.app-body {
  min-height: 600px;
}
.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
}
.active {
  border: 1px solid #27ba9b !important ;
}
.xtx-bread {
  display: flex;
  padding: 25px 10px;
}
.xtx-bread-item a {
  color: #666;
  transition: all 0.4s;
}
a {
  text-decoration: none;
  color: #333;
  outline: none;
}
a {
  background-color: transparent;
}
.xtx-bread i {
  font-size: 12px;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 22px;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
}
.goods-info .media {
  width: 580px;
  height: 600px;
  padding: 30px 50px;
}
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
  z-index: 500;
}

element.style {
  background-image: url(https://yanxuan-item.nosdn.127.net/9044e73….jpg);
  background-position: -400px -400px;
  display: none;
}

element.style {
  background-image: url(https://yanxuan-item.nosdn.127.net/9044e73….jpg);
  background-position: -400px -400px;
  display: none;
}
.goods-image .large {
  position: absolute;
  top: 0;
  left: 412px;
  width: 400px;
  height: 400px;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
  background-repeat: no-repeat;
  background-size: 800px 800px;
  background-color: #f8f8f8;
  display: none;
}

.goods-image .middle {
  width: 400px;
  height: 400px;
  background: #f5f5f5;
  position: relative;
  cursor: move;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
img {
  border-style: none;
}
.goods-image .middle .layer {
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  left: 0;
  top: 0;
  position: absolute;
}
.goods-image .small {
  width: 80px;
}
.goods-image .small li {
  width: 68px;
  height: 68px;
  margin-left: 12px;
  margin-bottom: 15px;
  cursor: pointer;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
img {
  border-style: none;
}
dd,
dl,
h1,
h3,
h4,
p,
ul {
  padding: 0;
  margin: 0;
}
.goods-image .small li.active,
.goods-image .small li:hover {
  border: 2px solid #27ba9b;
}
.goods-sales {
  display: flex;
  width: 400px;
  align-items: center;
  text-align: center;
  height: 140px;
}
.goods-sales li {
  flex: 1;
  position: relative;
}
.goods-sales li p:first-child {
  color: #999;
}
.goods-sales li p:nth-child(2) {
  color: #cf4444;
  margin-top: 10px;
}
.goods-sales li p:last-child {
  color: #666;
  margin-top: 10px;
}
.goods-sales li p:last-child i {
  color: #27ba9b;
  font-size: 14px;
  margin-right: 2px;
}
.goods-info .spec {
  flex: 1;
  padding: 30px 30px 30px 0;
}
.g-name {
  font-size: 22px;
}
.g-desc {
  color: #999;
  margin-top: 10px;
}
.g-price {
  margin-top: 10px;
}
.g-price span:first-child {
  color: #cf4444;
  margin-right: 10px;
  font-size: 22px;
}
.g-price span::before {
  content: "¥";
  font-size: 14px;
}
.g-price span:last-child {
  color: #999;
  text-decoration: line-through;
  font-size: 16px;
}
.g-service {
  background: #f5f5f5;
  width: 500px;
  padding: 20px 10px 0 10px;
  margin-top: 10px;
}
.g-service dl {
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}
dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
dd,
dl,
h1,
h3,
h4,
p,
ul {
  padding: 0;
  margin: 0;
}
.g-service dl dt {
  width: 50px;
  color: #999;
}
.g-service dl dd {
  color: #666;
}
.xtx-city {
  vertical-align: middle;
}
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
}
.xtx-city .select {
  border: 1px solid #e4e4e4;
  height: 30px;
  padding: 0 5px;
  line-height: 28px;
  cursor: pointer;
  overflow: hidden;
}
.xtx-city .select .value {
  color: #666;
  font-size: 12px;
}
.xtx-city .select i {
  font-size: 12px;
  margin-left: 5px;
}
.g-service dl dd:last-child span {
  margin-right: 10px;
}
.g-service dl dd:last-child span:before {
  content: "•";
  color: #27ba9b;
  margin-right: 2px;
}
.g-service dl dd:last-child a {
  color: #27ba9b;
}
.g-service dl dd {
  color: #666;
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
}
.goods-sku dl {
  display: flex;
  padding-bottom: 10px;
  align-items: center;
}
.goods-sku dl dt {
  width: 50px;
  color: #999;
}
.goods-sku dl dd {
  flex: 1;
  color: #666;
  line-height: 40px;
}
.goods-sku dl dd > img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.xtx-numbox {
  display: flex;
  align-items: center;
}
.xtx-numbox .label {
  width: 60px;
  color: #999;
  padding-left: 10px;
}
.xtx-numbox .numbox {
  width: 120px;
  height: 30px;
  border: 1px solid #e4e4e4;
  display: flex;
}
.xtx-numbox .numbox > a:first-of-type {
  border-right: 1px solid #e4e4e4;
}
.xtx-numbox .numbox > a:first-of-type {
  border-right: 1px solid #e4e4e4;
}
.xtx-numbox .numbox > input {
  width: 60px;
  padding: 0 5px;
  text-align: center;
  color: #666;
}
input[type="checkbox"],
input[type="password"],
input[type="search"],
input[type="text"] {
  padding: 0;
  outline: none;
  border: none;
  -webkit-appearance: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
.xtx-numbox .numbox > a {
  width: 29px;
  line-height: 28px;
  text-align: center;
  background: #f8f8f8;
  font-size: 16px;
  color: #666;
}
.primary {
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff;
}
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
.xtx-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.ellipsis,
.ellipsis-2 {
  text-overflow: ellipsis;
  overflow: hidden;
}
.ellipsis {
  white-space: nowrap;
}
</style>